<!DOCTYPE html>
<html lang="en" light-mode="dark">

    <head>
        <title>John Doe | Gallery</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="keywords"
            content="free portfolio template,portfolio template, portfolio website template, open source, open sourcing, contributing to open source" />
        <meta name="description"
            content="This project serves as a free and beautiful portfolio template for everyone. Anyone can showcase their work including moocs, education, projects, experience,etc. to the world." />
        <!-- Robot.txt -->
        <meta name="robots" content="index,follow" />
        <meta name="Googlebot" content="index,follow" />
        <meta name="AdsBot-Google" content="index,follow" />
        <meta property="og:site_name" content="https://portfolio.smaranjitghose.codes/experience.html">
        <meta property="og:title" content="John Doe | Experience">
        <meta property="og:description"
            content="This project serves as a free and beautiful portfolio template for everyone. Anyone can showcase their work including moocs, education, projects, experience,etc. to the world.">
        <meta property="og:type" content="website">
        <meta property="og:url" content="https://portfolio.smaranjitghose.codes/experience.html">
        <meta name="twitter:card" content="summary">
        <meta name="twitter:site" content="https://portfolio.smaranjitghose.codes/experience.html">

        <meta name="application-name" content="John Doe | Experience" />
        <meta name="apple-mobile-web-app-title" content="John Doe | Experience" />
        <meta name="summary"
            content="An open source project aimed at providing free and beautiful templates to everyone for building their portfolio websites and showcase their work to the world." />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />

        <!--For Dark/Light mode Toggle-->
        <script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>

        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap" rel="stylesheet" />

        <!--Import animation.css-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
        <script src='https://kit.fontawesome.com/a076d05399.js'></script>
        <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
        <link rel="stylesheet" href="assets/css/preloader.css">
        <link rel="stylesheet" type="text/css" href="assets/css/style.css" />

        <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
        <link id='favicon' rel="icon" href="assets/images/favicon.png" type="image/png">
        <!--Favicon-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
            integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
            crossorigin="anonymous" />
        <script defer src="./assets/js/dynamicTitle.js"></script>
        <link rel="stylesheet" href="assets/css/design.css">
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-M11CMZ12Q"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'G-M11CMZ12Q');
        </script>
    </head>

    <body class="no-scroll-preload">

        <!-- loader -->
        <div class="loader-container">
            <div class="atom">
                <div class="electron"></div>
                <div class="electron-alpha"></div>
                <div class="electron-omega"></div>
			</div>
        </div>
        <!--Dynamic Nav Bar-->

        <!-- script -->
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"
            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

        <div class="main_body">

            <!-- hero section -->
            <div class="hero">
                <div class="item1">
                </div>
                <div class="item2">
                    <h1>My <span>Gallery</span></h1>
                    <p>“Creativity takes courage”</p>
                </div>
            </div>

            <!-- gallery -->
            <div class="container_gallery">
                <div class="item1">
                    <h2>UI/UX</h2>
                    <div class="gallery_section">
                        <div class="staggered-grid">
                            <div class="picture-container">
                                <a href="assets/images/designs/ui_ux/1.svg" target="_blank"
                                    rel="noreferrer noopener nofollow">
                                    <span>Description</span>
                                </a>
                            </div>
                            <div class="picture-container">
                                <a href="assets/images/designs/ui_ux/2.svg" target="_blank"
                                    rel="noreferrer noopener nofollow">
                                    <span>Description</span>
                                </a>
                            </div>
                            <div class="picture-container">
                                <a href="assets/images/designs/ui_ux/3.svg" target="_blank"
                                    rel="noreferrer noopener nofollow">
                                    <span>Description</span>
                                </a>
                            </div>
                            <div class="picture-container">
                                <a href="assets/images/designs/ui_ux/4.svg" target="_blank"
                                    rel="noreferrer noopener nofollow">
                                    <span>Description</span>
                                </a>
                            </div>
                            <div class="picture-container">
                                <a href="assets/images/designs/ui_ux/5.svg" target="_blank"
                                    rel="noreferrer noopener nofollow">
                                    <span>Description</span>
                                </a>
                            </div>
                            <div class="picture-container">
                                <a href="assets/images/designs/ui_ux/6.svg" target="_blank"
                                    rel="noreferrer noopener nofollow">
                                    <span>Description</span>
                                </a>
                            </div>
                            <div class="picture-container">
                                <a href="assets/images/designs/ui_ux/7.svg" target="_blank"
                                    rel="noreferrer noopener nofollow">
                                    <span>Description</span>
                                </a>
                            </div>
                            <div class="picture-container">
                                <a href="assets/images/designs/ui_ux/8.svg" target="_blank"
                                    rel="noreferrer noopener nofollow">
                                    <span>Description</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item2">
                    <h2>Mockups Design</h2>
                    <div class="gallery_section">
                        <div class="staggered-grid">
                            <div class="picture-container">
                                <a href="assets/images/designs/mockups/1.svg" target="_blank"
                                    rel="noreferrer noopener nofollow">
                                    <span>Description</span>
                                </a>
                            </div>
                            <div class="picture-container">
                                <a href="assets/images/designs/mockups/2.svg" target="_blank"
                                    rel="noreferrer noopener nofollow">
                                    <span>Description</span>
                                </a>
                            </div>
                            <div class="picture-container">
                                <a href="assets/images/designs/mockups/3.svg" target="_blank"
                                    rel="noreferrer noopener nofollow">
                                    <span>Description</span>
                                </a>
                            </div>
                            <div class="picture-container">
                                <a href="assets/images/designs/mockups/4.svg" target="_blank"
                                    rel="noreferrer noopener nofollow">
                                    <span>Description</span>
                                </a>
                            </div>
                            <div class="picture-container">
                                <a href="assets/images/designs/mockups/5.svg" target="_blank"
                                    rel="noreferrer noopener nofollow">
                                    <span>Description</span>
                                </a>
                            </div>
                            <div class="picture-container">
                                <a href="assets/images/designs/mockups/6.svg" target="_blank"
                                    rel="noreferrer noopener nofollow">
                                    <span>Description</span>
                                </a>
                            </div>
                            <div class="picture-container">
                                <a href="assets/images/designs/mockups/7.svg" target="_blank"
                                    rel="noreferrer noopener nofollow">
                                    <span>Description</span>
                                </a>
                            </div>
                            <div class="picture-container">
                                <a href="assets/images/designs/mockups/8.svg" target="_blank"
                                    rel="noreferrer noopener nofollow">
                                    <span>Description</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- Dynamic footer section -->

        <!-- Scripts -->

        <!-- Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-G6D61F5TL4"></script>
        <!-- Fetching our Google Tag Manager -->

        <script src="https://code.jquery.com/jquery-3.5.1.min.js"
            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <script src="assets/js/app.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
        <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    </body>

</html>
